<!--  -->
<template>
  <div class="workScheduling-pack">
    <ele-form-search :formConfig="formConfig" :initForm="initForm" @handleSearch="handleSearch" @handleReset="handleReset" ref="eleFormSearch"></ele-form-search>

    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label">
          <p><i class="el-icon-date"></i> {{ $i18n.t('workScheduling.sequentialChart') }}</p>
        </span>
        <div>
          <div class="example">
            <span class="relative mark-item pl-32 ml-16" :class="[item.class]" v-for="item in moStatusOptions" :key="item.class">{{ item.label }}</span>
          </div>
          <TimingDiagram :data="queryData"></TimingDiagram>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"><i class="el-icon-document"></i> {{ $i18n.t('workScheduling.workOrderExecution') }}</span>
        <div class="right">
          <div class="flex header">
            <div class="th flex-all-c border1">{{ $i18n.t('workScheduling.waiteIssue') }}({{ rightList[0].length || 0 }})</div>
            <div class="th flex-all-c border2">{{ $i18n.t('workScheduling.issued') }}({{ rightList[1].length || 0 }})</div>
            <div class="th flex-all-c border3">{{ $i18n.t('workScheduling.inProgress') }}({{ rightList[2].length || 0 }})</div>
            <div class="th flex-all-c border4">{{ $i18n.t('workScheduling.completed') }}({{ rightList[3].length || 0 }})</div>
          </div>
          <div class="tables flex">
            <template v-if="rightList && rightList.length">
              <div class="tabody" :key="i" v-for="(ite, i) in rightList">
                <div class="td" :key="index" v-for="(item, index) in ite">
                  <el-card class="card" shadow="hover" :class="item.class" @click.native="goworkDetails(item)">
                    <div class="card-box">
                      <p class="flex-j-sb p-b-5">
                        <i class="el-icon-date icon">{{ item.planBeginDate || '/' }}{{ $i18n.t('workScheduling.to') }}{{ item.planEndDate || '/' }}</i>
                        <span class="order-title__msg">{{ item.msg }}</span>
                      </p>
                      <p class="p-b-5 font-w">{{ item.prodCode }} - {{ item.prodName }}</p>
                      <p class="count">{{ item.quantity }}{{ item.unit }}</p>
                    </div>
                  </el-card>
                </div>
              </div>
            </template>
            <el-empty v-if="rightList.flat().lenght == 0" class="m-auto"></el-empty>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
//例如：import 《组件名称》 from '《组件路径》';
import eleFormSearch from '@/components/ele-form-search/index'
import TimingDiagram from './components/timingDiagram.vue'
import {
  getLineCodeList, //查询线体
  getLineCodeListNew
} from '@/api/order/mesProdOrder'
import { getWorkScheduleByStatus, getWorkSchedule } from '@/api/order/workScheduling.js'
import dayjs from 'dayjs'
import { searchArrKey } from '@/mixins/searchArrKey'
export default {
  name: 'workScheduling',
  //import引入的组件需要注入到对象中才能使用
  components: { eleFormSearch, TimingDiagram },
  mixins: [searchArrKey],
  data() {
    //这里存放数据
    const self = this
    var choiceDate = null
    return {
      formConfig: {
        inline: true,
        formDesc: {
          deliveryDate: {
            type: 'daterange',
            label: $i18n.t('workScheduling.deliveryDate'),
            attrs: {
              valueFormat: 'yyyy-MM-dd',
              searchArrKey: ['planBeginDateMin', 'planEndDateMax'],
              clearable: false,
              pickerOptions: {
                onPick: ({ maxDate, minDate }) => {
                  // 把选择的第一个日期赋值给一个变量。
                  choiceDate = minDate.getTime()

                  // 如何你选择了两个日期了，就把那个变量置空
                  if (maxDate) choiceDate = ''
                },
                disabledDate: (time) => {
                  // 如何选择了一个日期
                  if (choiceDate) {
                    // 7天的时间戳
                    const one = 30 * 24 * 3600 * 1000
                    // 当前日期 - one = 7天之前
                    const minTime = choiceDate - one
                    // 当前日期 + one = 7天之后
                    const maxTime = choiceDate + one
                    return time.getTime() < minTime || time.getTime() > maxTime
                  } else {
                    // 如果没有选择日期，就要限制不能选择今天及以后
                    // return time.getTime() > Date.now();
                  }
                }
              }
            }
          },
          workshopCode: {
            label: $i18n.t('mesProdOrderPlan.workshopName'),
            type: 'select',

            prop: {
              value: 'modelingCode',
              text: 'modelingName'
            },
            options: async (data) => {
              const params = {
                modelingCode: self.$store.getters.factoryCode,
                level: 4,
                modelingType: '0'
              }
              const list = await getLineCodeListNew(params)
              return list.data.result
            }
          },
          lineCode: {
            label: $i18n.t('mesProdOrderPlan.line'),
            type: 'select',
            prop: {
              value: 'modelingCode',
              text: 'modelingName'
            },
            optionsLinkageFields: ['workshopCode'],
            options: async (data) => {
              if (data && data.workshopCode) {
                const params = {
                  modelingCode: data.workshopCode,
                  level: 5
                }
                const list = await getLineCodeList(params)
                return list.data.result
              } else {
                return []
              }
            }
          },
          orderCode: {
            type: 'input',
            label: $i18n.t('workScheduling.orderCode')
          },
          prodCode: {
            type: 'input',
            label: $i18n.t('workScheduling.prodCode')
          },
          prodName: {
            type: 'input',
            label: $i18n.t('workScheduling.prodName')
          }
        }
      },
      initForm: {},
      moStatusOptions: [
        { label: $i18n.t('workScheduling.waiteIssue'), value: '00', class: 'daixiafa', checked: true },
        { label: $i18n.t('workScheduling.issued'), value: '10', class: 'daishengchan', checked: true },
        {
          label: $i18n.t('workScheduling.inProgress'),
          value: '20',
          class: 'shengchanzhong',
          checked: true
        },
        {
          label: $i18n.t('workScheduling.completed'),
          value: '20',
          class: 'wancheng',
          checked: true
        }
      ],
      rightList: [[], [], [], []],
      queryData: {}
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    goworkDetails(row) {
      // saleCode
      this.$router.push({
        path: '/order/mesProdOrderPlan/workSee',
        query: {
          id: row.orderCode
        }
      })
      // this.$refs.details.init(row);
    },

    getSearchParams() {
      let formData = this.$refs.eleFormSearch.formData || {}
      formData = this.getArrtoMap(formData)
      return formData
    },
    async getWorkScheduleByStatus() {
      let res = await getWorkScheduleByStatus(this.getSearchParams())
      let { result } = res.data

      let now = Date.now()
      this.rightList = [
        result['0'].map((ite) => {
          const plan = new Date(ite.planBeginDate + ' 00:00:00').getTime()
          const diff = plan - now
          return {
            ...ite,
            msg: diff > 0 ? (diff < 24 * 60 * 60 * 1000 ? $i18n.t('common.warning2') : '') : $i18n.t('common.delay'),
            class: diff > 0 ? (diff < 24 * 60 * 60 * 1000 ? 'notice' : '') : 'overtime'
          }
        }),
        result['1'].map((ite) => {
          const plan = new Date(ite.planBeginDate + ' 23:59:59').getTime()
          const diff = plan - now
          return {
            ...ite,
            msg: diff > 0 ? (diff < 24 * 60 * 60 * 1000 ? $i18n.t('common.warning2') : '') : $i18n.t('common.delay'),
            class: diff > 0 ? (diff < 24 * 60 * 60 * 1000 ? 'notice' : '') : 'overtime'
          }
        }),
        result['3'].map((ite) => {
          const plan = new Date(ite.planEndDate + ' 23:59:59').getTime()
          const diff = plan - now
          return {
            ...ite,
            msg: diff > 0 ? (diff < 24 * 60 * 60 * 1000 ? $i18n.t('common.warning2') : '') : $i18n.t('common.delay'),
            class: diff > 0 ? (diff < 24 * 60 * 60 * 1000 ? 'notice' : '') : 'overtime'
          }
        }),
        result['4'].map((ite) => {
          const plan = new Date(ite.planEndDate + ' 23:59:59').getTime()
          const diff = plan - now
          return {
            ...ite,
            msg: diff > 0 ? (diff < 24 * 60 * 60 * 1000 ? $i18n.t('common.warning2') : '') : $i18n.t('common.delay'),
            class: diff > 0 ? (diff < 24 * 60 * 60 * 1000 ? 'notice' : '') : 'overtime'
          }
        })
      ]

      console.log(111, this.rightList)
    },

    async getWorkSchedule() {
      let data = this.getSearchParams()
      let res = await getWorkSchedule({
        ...data,
        planBeginDateMin: data.planBeginDateMin,
        planEndDateMax: data.planEndDateMax
      })
      let { timeList, orderList } = res.data.result
      this.queryData = {
        timeData: timeList,
        tableData: orderList
      }
    },
    // 搜索
    handleSearch() {
      this.init()
    },
    // 重置
    handleReset() {
      this.setDate()
      this.init()
    },

    //设置默认七天
    setDate() {
      this.$set(this.initForm, 'deliveryDate', [dayjs().format('YYYY-MM-DD'), dayjs().add(7, 'day').format('YYYY-MM-DD')])
    },
    getList() {},
    init() {
      this.$nextTick(() => {
        this.getWorkSchedule()
        this.getWorkScheduleByStatus()
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.setDate()
    this.init()
  }
}
</script>
<style scoped lang="scss">
.workScheduling-pack {
  width: 100%;
  height: 100%;
  .right {
    width: 100%;
    overflow: auto;
    .header {
    }
    .th {
      width: 300px;
      height: 50px;
      text-align: center;
      background: #ebf0f5;
      margin-right: 10px;
      flex-shrink: 0;
      box-sizing: border-box;
      font-size: 14px;
      font-weight: 700;
    }
    .tables {
      width: 1240px;
      min-height: 200px;
      max-height: 450px;
      overflow-y: auto;
      overflow-x: hidden;
      text-align: center;
    }
    .tabody {
      margin-right: 10px;
      width: 300px;
      .td {
        margin-top: 10px;
        width: 300px;
        .card {
          width: 300px;
          cursor: pointer;
          // height: 130px;
          .card-box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            .count {
              color: #595858;
            }
            & > p {
              font-size: 14px;
              text-align: left;
            }
            .icon {
              color: #bcbec2;
            }
          }
        }
        .notice {
          border-color: #e7a11a;
          .order-title__msg {
            color: #e7a11a;
          }
        }
        .overtime {
          border-color: #ff4656;

          .order-title__msg {
            color: #ff4656;
          }
        }
      }
    }

    .border1 {
      border-bottom: 8px solid #f34a30;
    }
    .border2 {
      border-bottom: 8px solid #f4bb5b;
    }
    .border3 {
      border-bottom: 8px solid #3d82ea;
    }
    .border4 {
      border-bottom: 8px solid #00bfa5;
    }
    .border5 {
      border-bottom: 8px solid #93b0cb;
    }
  }

  .mark-item:before {
    content: ' ';
    position: absolute;
    left: 6px;
    top: 6px;
    width: 16px;
    height: 12px;
    border: 2px solid #ccc;
    border-radius: 6px;
    background-color: #eee;
  }
  .example {
    // position: absolute;
    float: right;
  }
  .shengchanzhong:before {
    background-color: rgba(177, 207, 250, 0.39);
    border-color: #3d82ea;
  }
  .wancheng:before {
    background-color: #18c9274f;
    border-color: #18c927;
  }
  .daixiafa:before {
    background-color: rgba(239, 226, 247, 0.5);
    border-color: #f34a30;
  }
  .daishengchan:before {
    background-color: rgba(222, 242, 255, 0.5);
    border-color: #f4bb5b;
  }
  .daishengchan,
  .daixiafa,
  .shengchanzhong {
    .mark-check {
      display: block;
    }
  }
  /deep/.el-card__body {
    padding: 14px !important;
  }
  .flex {
    display: flex;
  }

  .flex-j-sb {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .flex-a-c {
    display: flex;
    align-items: center;
  }

  .flex-all-c {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .p-b-5 {
    padding-bottom: 5px;
  }
  .font-w {
    font-weight: 600;
  }
  .m-auto {
    margin: 0 auto;
  }
}
</style>
